<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input {
      width: 200px;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <input type="file">
  <img src="" alt="" width="50px">
  <script>
    let btn = document.querySelector('input')
    let div = document.querySelector('img')
    let a = new FileReader()
    btn.addEventListener('change', function (e) {
      console.log(e);
      let file = e.target.files[0]; //获取图片资源
    a.readAsDataURL(file)
    a.onload = function (arg) {
      console.log(arg);
      let img = arg.target.result
      div.src = img
    }
      console.log(a);
    })

    console.log(a);


    // 修改名字
    //   let a =[
    //   {
    //     val1:2,
    //     children:{
    //       val2:3
    //     }
    //   },
    //   {
    //     val1:2,
    //     children:{
    //       val2:3,
    //       children:{
    //       val2:3
    //     }
    //     }
    //   }
    //   ]
    //  let b = JSON.parse(JSON.stringify(a).replace(/val2|val1/g,"val"))
    //   console.log(b);


  </script>
</body>

</html>